<template>
  <div class="w-full h-full rounded-xl" id="video">
    <!-- <div class="h-3/4 aspect-video">
      <div class="mb-2">直播</div>
      <div id="video2"></div>
    </div> -->
  </div>
</template>

<script setup>
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
// import HlsPlugin from 'xgplayer-hls'
import { onMounted } from 'vue'
onMounted(() => {
  let player = new Player({
    id: 'video',
    lang: 'zh-cn',
    poster:
      '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg',
    url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
    width: '100%',
    height: '100%',
  })
  // let player2 = new Player({
  //   id: 'video2',
  //   lang: 'zh-cn',
  //   // poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
  //   isLive: true,
  //   autoplay: true,
  //   plugins: [HlsPlugin],
  //   url: 'http://202.99.99.13:7086/live/cameraid/1000011%240/substream/1.m3u8',
  //   width: '100%',
  //   height: '100%',
  // })
})
</script>

<style lang="scss" scoped></style>
